<!-- image -->
<template>
  <div class="ai-image">
    <div class="left">
      <div class="segmented">
        <el-segmented v-model="selectFuncType" :options="funcTypeOptions" />
      </div>
      <div class="modal-switch-container">
        <TextTo3d
          v-if="selectFuncType === AiCreateThreeDEnum.TEXT_3D"
          ref="textTo3d"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <ImagesTo3d
          v-if="selectFuncType === AiCreateThreeDEnum.IMAGES_3D"
          ref="imagesTo3d"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <ImageTo3d
          v-if="selectFuncType === AiCreateThreeDEnum.IMAGE_3D"
          ref="imageTo3d"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />

        <TextToTexture
          v-if="selectFuncType === AiCreateThreeDEnum.TEXT_TEXTURE"
          ref="textToTexture"
          @on-create-start="handleCreateStart"
          @on-create-complete="handleCreateComplete"
        />
      </div>
    </div>
    <div class="main">
      <ThreedList ref="threedListRef" platform="Tripo"
                  @on-regeneration="handleRegeneration"
                  @on-texture="handleTexture"
                  @on-refine="handleRefine"
                  @on-animation-rig="handleAnimationRig"
                  @on-animation-rig-retarget="handleAnimationRigRetarget"
      />
    </div>
  </div>

  <el-dialog
    title="3D动画参数"
    v-model="showDialog"
    :width="400"
    append-to-body
    destroy-on-close
  >
    <div class="enable_pbr">
      <div class="mt-15px mb-15px">
        <el-text tag="b">文件类型</el-text>
      </div>
      <el-radio-group class="w-1/1" v-model="outFormat">
        <el-radio value="glb">
          glb
        </el-radio>
        <el-radio value="fbx">
          fbx
        </el-radio>
      </el-radio-group>
    </div>

    <div v-if="showAnimationRig">

    </div>

    <div v-if="showAnimationRigRetarget">

      <div class="enable_pbr">
        <div class="mt-15px mb-15px">
          <el-text tag="b">动画烘焙</el-text>
        </div>
        <!--是/否-->
        <el-switch v-model="bakeAnimation "/>
      </div>

      <div class="hot-words">
        <div>
          <el-text tag="b">动画预设</el-text>
        </div>
        <el-space wrap class="word-list">
          <el-button
            round
            class="btn"
            :type="selectAnimation === animation.key ? 'primary' : 'default'"
            v-for="animation in animationList"
            :key="animation.key"
            @click="handleAnimationClick(animation.key)"
          >
            {{ animation.name }}
          </el-button>
        </el-space>
      </div>
    </div>

    <template #footer>
      <template v-if="showAnimationRig">
        <el-button type="primary" :loading="createIn" @click="handleAnimationRig2">
          {{ createIn ? '生成中' : '生成内容' }}
        </el-button>
      </template>
      <template v-if="showAnimationRigRetarget">
        <el-button type="primary" :loading="createIn" @click="handleAnimationRigRetarget2">
          {{ createIn ? '生成中' : '生成内容' }}
        </el-button>
      </template>
      <el-button @click="showDialog = false">取 消</el-button>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
import ThreedList from './components/ThreedList.vue'
import {AiCreateThreeDEnum, AiPlatformEnum, animationList} from '@/views/ai/utils/constants'
import TextToTexture from './components/texttotexture/index2.vue'
import TextTo3d from './components/textto3d/index2.vue'
import ImagesTo3d from './components/imagesto3d/index2.vue'
import ImageTo3d from './components/imageto3d/index2.vue'
import {ModelToAnimationReqVO, TextToRefineReqVO, ThreedApi, ThreedVO} from "@/api/ai/threed";
const message = useMessage()

const threedListRef = ref<any>() // threed 列表 ref
const textTo3d = ref<any>() // textTo3d(tripo.ai) ref
const imagesTo3d = ref<any>() // imagesTo3d(tripo.ai) ref
const imageTo3d = ref<any>() // imageTo3d(tripo.ai) ref
const textToTexture = ref<any>() // textToTexture(tripo.ai) ref

const selectAnimation = ref<string>('preset:idle')
const bakeAnimation = ref<boolean>(false)
const outFormat = ref<string>('glb')
const createIn = ref<boolean>(false) // 生成中
// 定义属性
const selectFuncType = ref(AiCreateThreeDEnum.IMAGE_3D)
const funcTypeOptions = [
  {
    label: '图生模型',
    value: AiCreateThreeDEnum.IMAGE_3D
  },
  {
    label: '文生模型',
    value: AiCreateThreeDEnum.TEXT_3D
  },
  {
    label: '多图生模型',
    value: AiCreateThreeDEnum.IMAGES_3D
  },
  {
    label: '文生纹理',
    value: AiCreateThreeDEnum.TEXT_TEXTURE
  }
]

/** 模型版本 */
const handleAnimationClick = async (key: string) => {
  selectAnimation.value = key
}
/** 模型 start  */
const handleCreateStart = async () => {

}

/** 模型 complete */
const handleCreateComplete = async () => {
  await threedListRef.value.getThreedList()
}

/**  重新生成：将模型详情填充到对应平台  */
const handleRegeneration = async (threed:ThreedVO) => {
  // 根据不同平台填充 threed
  selectFuncType.value = threed.funcType;
  await nextTick()
  if (threed.funcType === AiCreateThreeDEnum.TEXT_TEXTURE) {
    textToTexture.value.settingValues(threed)
  } if (threed.funcType === AiCreateThreeDEnum.TEXT_3D) {
    textTo3d.value.settingValues(threed)
  } else if (threed.funcType === AiCreateThreeDEnum.IMAGES_3D) {
    imagesTo3d.value.settingValues(threed)
  }else if (threed.funcType === AiCreateThreeDEnum.IMAGE_3D) {
    imageTo3d.value.settingValues(threed)
  }
}

const handleTexture = async (threed:ThreedVO) =>{
  // 根据不同平台填充 threed
  selectFuncType.value = AiCreateThreeDEnum.TEXT_TEXTURE;
  await nextTick()
  textToTexture.value.handleCreateThreedTexture(threed)
}


const handleRefine = async (threed: ThreedVO) => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    // 加载中
    //createIn.value = true
    // 回调
    await handleCreateStart()
    const form = {
      platform: AiPlatformEnum.TRIPO, // 平台
      model: AiPlatformEnum.TRIPO, // 模型
      funcType: 'text_refine',
      previewTaskId: threed.taskId // 艺术样式
    } as TextToRefineReqVO
    // 发送请求
    await ThreedApi.generateModelToRefine(form)
  } finally {
    // 回调
    await handleCreateComplete()
    // 加载结束
    //createIn.value = false
  }
}

/**
 * 动画
 */
const threedObj = ref<ThreedVO>();
const showDialog = ref<boolean>(false);
const showAnimationRig = ref<boolean>(false);
const showAnimationRigRetarget = ref<boolean>(false);


const handleAnimationRig = async (threed: ThreedVO) => {
  threedObj.value = threed;
  showDialog.value = true;
  showAnimationRig.value = true;
  showAnimationRigRetarget.value = false;
}

const handleAnimationRig2 = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    //关闭对话框
    showDialog.value = false;
    // 加载中
    createIn.value = true
    // 回调
    await handleCreateStart()
    const form = {
      platform: AiPlatformEnum.TRIPO, // 平台
      model: AiPlatformEnum.TRIPO, // 模型
      funcType: 'animationRig',
      previewTaskId: threedObj.value?.taskId, // 任务Id
      outFormat: outFormat.value,
    } as ModelToAnimationReqVO
    // 发送请求
    await ThreedApi.generateAnimationRig(form)
  } finally {
    // 回调
    await handleCreateComplete()
    // 加载结束
    createIn.value = false
  }
}

const handleAnimationRigRetarget = async (threed: ThreedVO) => {
  threedObj.value = threed;
  showDialog.value = true;
  showAnimationRig.value = false;
  showAnimationRigRetarget.value = true;
}

const handleAnimationRigRetarget2 = async () => {
// 二次确认
  await message.confirm(`确认生成内容?`)
  try {
    //关闭对话框
    showDialog.value = false;
    // 加载中
    createIn.value = true
    // 回调
    await handleCreateStart()
    const form = {
      platform: AiPlatformEnum.TRIPO, // 平台
      model: AiPlatformEnum.TRIPO, // 模型
      funcType: 'animationRigRetarget',
      previewTaskId: threedObj.value?.taskId, // 任务Id
      outFormat: outFormat.value,
      bakeAnimation: bakeAnimation.value,
      animation: selectAnimation.value,
    } as ModelToAnimationReqVO
    // 发送请求
    await ThreedApi.generateAnimationRigRetarget(form)
  } finally {
    // 回调
    await handleCreateComplete()
    // 加载结束
    createIn.value = false
  }
}
</script>

<style scoped lang="scss">
.ai-image {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .left {
    display: flex;
    flex-direction: column;
    padding: 20px;
    width: 350px;

    .segmented {
      position: absolute;left: 0px; top: 10px;
    }

    .segmented .el-segmented {
      --el-border-radius-base: 16px;
      --el-segmented-item-selected-color: #fff;
      background-color: #ececec;
      width: 350px;
    }

    .modal-switch-container {
      height: 100%;
      overflow-y: auto;
      margin-top: 30px;
    }
  }

  .main {
    flex: 1;
    background-color: #fff;
  }

  .right {
    width: 350px;
    background-color: #f7f8fa;
  }
}
// 热词
.hot-words {
  display: flex;
  flex-direction: column;
  margin-top: 15px;

  .word-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    margin-top: 15px;

    .btn {
      margin: 0;
    }
  }
}

</style>
